<template>
  <div class="PictureSet">
    <el-tabs
      v-model="activeName"
      type="card"
      :before-leave="beforeLeave"
      class="my-tab-pane"
    >
      <el-tab-pane
        v-for="(item, index) in filtergallery(galleryList)"
        :key="item.custom_tag"
        :label="item.custom_tag"
        :name="item.custom_tag"
        class="relative"
      >
        <template #label>
          <span>{{ item.custom_tag }}</span>
          <svg-icon
            class="ml-2 inline-block"
            icon-class="Edit"
            @click="editEdit(item, index)"
            v-if="handleType != 'view'"
          ></svg-icon>
          <span
            v-if="item.language_id_text"
            class="font-[10px] absolute -left-[4px] -top-[4px] bg-[#FAAD14] text-[#fff] rounded-tl-[4px] rounded-br-[4px] h-[20px] leading-[20px] px-[5px] scale-75"
          >
            {{ item.language_id_text }}
          </span>
          <div
            class="absolute -right-[1px] -top-[1px]"
            @click.stop="removeTab(item.custom_tag)"
          >
            <img class="w-[18px] h-[18px]" src="@/assets/images/closable.png" />
          </div>
        </template>
        <div class="border border-[--base-border-color]">
          <Module
            v-model="filtergallery(galleryList)[index].image_list"
            :customTag="item.custom_tag"
          ></Module>
        </div>
      </el-tab-pane>
      <el-tab-pane key="add" name="add" class="flex" v-if="handleType != 'view'">
        <template #label>
          <span class="flex items-centerc">
            <svg-icon icon-class="add" class="mt-3" />
          </span>
        </template>
      </el-tab-pane>
    </el-tabs>
  </div>
  <SelectTag ref="selectTagRef" @add="confirmAddTag" @edit="confirmEditTag"></SelectTag>
</template>

<script setup name="PictureSet">
import { nextTick, toRefs } from "vue";
import Module from "./components/Module.vue";
import SelectTag from "@/components/Selects/SelectTag";
import { ElMessage, ElMessageBox } from "element-plus";
let handleType = reactive(inject("handleType"));
let options = reactive(inject("options"));

const props = defineProps({
  modelValue: {
    type: Object,
    default: () => {},
  },
  currentIndex: {
    type: Number,
  },
});

const galleryList = computed({
  get: () => {
    if (props.modelValue.length) {
      activeName.value = props.modelValue[0].custom_tag;
    }
    return props.modelValue;
  },
  set: (val) => {
    emit("update:modelValue", val);
  },
});

provide("galleryList", galleryList);

const filtergallery = (list) => {
  return list.filter((i) => {
    if (!i.delete) {
      return i;
    }
  });
};

const data = reactive({
  custom_index: 0,
  activeName: "默认",
});

const { activeName, custom_index } = toRefs(data);

const beforeLeave = (currentName) => {
  if (currentName == "add") {
    addTab();
    return false;
  }
};

const selectTagRef = ref();
// 新增标签
const addTab = () => {
  selectTagRef.value.open("add");
};

//编辑标签
const editEdit = (item, index) => {
  custom_index.value = index;
  selectTagRef.value.open("edit", {
    custom_tag: item.custom_tag,
    language_code: item.language_code,
    language_id: item.language_id,
  });
};

// 删除标签
const removeTab = (targetName) => {
  if (galleryList.value.length <= 1) {
    return ElMessage.error("至少保留一个标签");
  }

  ElMessageBox.confirm("是否删除该标签及标签中图片？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "error",
  }).then(async () => {
    galleryList.value.forEach((tab, index) => {
      if (tab.custom_tag == targetName) {
        if (handleType.value == "edit") {
          galleryList.value[index].delete = 1;
        } else {
          galleryList.value.splice(index, 1);
        }
        activeName.value = filtergallery(galleryList.value)[
          filtergallery(galleryList.value).length - 1
        ].custom_tag;
      }
    });
  });
};

// 初始化tab赋值
const init = () => {
  nextTick(() => {
    activeName.value = galleryList.value[0].custom_tag;
  });
};

// 新增编辑标签回调
const confirmAddTag = (data) => {
  const imageTypeText = options.value["assignment.ImagesAssignment"]?.[0].imageTypeText;

  data.custom_tag_list.forEach((item) => {
    const image_types = imageTypeText.map((item) => ({
      label_type: item.label,
      type: item.value,
      showType: 0,
      values: [],
    }));
    galleryList.value.push({
      custom_tag: item.custom_tag,
      language_code: item.language_code,
      language_id: item.language_id,
      language_id_text: item.language_id_text,
      image_list: image_types,
    });
  });
};

// 编辑标签回调
const confirmEditTag = (item) => {
  activeName.value = item.custom_tag;
  galleryList.value[custom_index.value].custom_tag = item.custom_tag;
  galleryList.value[custom_index.value].language_code = item.language_code;
  galleryList.value[custom_index.value].language_id = item.language_id;
  galleryList.value[custom_index.value].language_id_text = item.language_id_text;
  galleryList.value[custom_index.value].image_list.forEach((i) => {
    i.values.length &&
      i.values.forEach((j) => {
        j.tag = item.custom_tag;
      });
  });
};

defineExpose({ init });
</script>
<style lang="scss" scoped>
.PictureSet {
  flex: 1;
}

.Picture-card {
  margin: 8px;

  :deep(.el-card__header) {
    border-bottom: 1px solid var(--el-card-border-color);
  }
  :deep(.el-tabs__nav) {
    border-color: var(--el-border-color-base);
  }
}

:deep(.el-tabs__nav) {
  display: flex;
}

:deep(.el-card__body) {
  display: flex;
  flex-direction: column;
}
</style>
